<template>
    <section id="mine">
        <p class="login">登录</p>
        <div>
            <i></i>
            微信登录
        </div>
        <p class="order">其他登录方式</p>
        <ul>
            <li v-for="item in loginWay">
                <router-link :to="item.link">
                    <p>
                        <img :src="item.pic">
                    </p>
                    <span>{{item.name}}</span>
                </router-link>
            </li>
        </ul>
    </section>
</template>

<script>
export default {
    data(){
        return{
                loginWay : [
                {
                    link:'/qqLogin',
                    name:'QQ登录',
                    pic:'./src/assets/images/mine/qq.png'
                },{
                    link:'/passFreeLogin',
                    name:'免密登录',
                    pic:'./src/assets/images/mine/phone.png'
                },{
                    link:'/countLogin',
                    name:'账号登录',
                    pic:'./src/assets/images/mine/count.png'
                }
            ]
        }
        
    }
}
</script>

<style lang="scss">

    #mine{
        .login{
            font-size: 30px;
            margin:60px 0 40px;
            text-align: center;
        }
        &>div{
            width:80%;
            margin:0 auto 40px;
            color: white;
            line-height: 50px;
            background-color: #09BB07;
            border-radius: 30px;
            text-align: center;
            i{
                display: inline-block;
                width:  30px;
                height: 15px;
                vertical-align: middle;
                background: url('../../assets/images/mine/wechat.png')no-repeat center/contain;
            }
        }
        .order{
            color:#ACACAC;
            text-align: center;
            position: relative;
            padding: 45px 0px;
            font-size: 14px;
            &:before{
                content: '';
                display: block;
                height: 1px;
                width: 30px;
                position: absolute;
                left: 46%;
                top: 10px;
                background-color: gray;
            }
        }
        ul{
            display: flex;
            justify-content: space-around;
            a{
                text-decoration: none;
            }
            li{
                text-align: center;
                p{
                    width:50%;
                    margin:0 auto;
                    img{
                        width: 100%;
                    }
                }
                span{
                    font-size:  12px;
                    color:gray;
                }
            }
        }
    }
</style>